<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="这是一个 adminInfo 页面">
<meta name="keywords" content="adminInfo">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<title>商品回收站</title>
</head>

<!-- CSS -->    
<link rel="stylesheet" type="text/css"href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<link href="static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="icon" type="image/png" href="${basePath}static/adminManager/assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="${basePath}static/adminManager/assets/i/app-icon72x72@2x.png">
<link rel="stylesheet" href="${basePath}static/adminManager/assets/css/amazeui.min.css" />
<link rel="stylesheet" href="${basePath}static/adminManager/assets/css/admin.css">

<body>

    <div class="admin-biaogelist">
    
		<div class="listbiaoti am-cf">
			<ul class="am-icon-flag on">商品回收站</ul>
			
		<div class="am-btn-group am-btn-group-xs" style="margin-left:300px;margin-top: 11px;">
          <button type="button" class="am-btn am-btn-default" onclick="todelect()">
          		<span class="am-icon-trash-o"></span> 删除
          	</button>
          <button type="button" class="am-btn am-btn-default" onclick="delAllDeleted()">
          		<span class="am-icon-archive"></span> 清空回收站
          </button>
       </div>
			
        	<dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">商品回收站</a></dl>
        </div>
        
        
<div class="am-g tpl-g" >
	<div class="tpl-login">
		<div class="tpl-login-content">
			
  <form id="form3"  class="form-horizontal "  action="PhoneAction" method="post">
		<div class="form-group" >
			<div class="am-form am-g">
				<table class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
					<!-- 表格头部 -->
					<thead>
						<tr class="am-success">
							<th  style='vertical-align:middle;text-align:center' class="table-check">
								<input type="checkbox" name="selectAll" id="selectAll" onclick="selectF()"/>
								<script type="text/javascript">
									function selectF(){
										//获取全选框元素
										var ch1=document.getElementById("selectAll");
										//获取全选框的选中状态
										var ch1Checked=ch1.checked;
										//获取每一个复选框元素
										var ch2=document.getElementsByName("select");
										//如果true则选中所有复选框，如果false则取消选中所有复选框
										if(ch1Checked){
											for(var i=0;i<ch2.length;i++){ch2[i].checked=true;}
										}else{
											for(var i=0;i<ch2.length;i++){ch2[i].checked=false;}
										}
									}
									</script>
							</th>
							<th style='vertical-align:middle;text-align:center'>序号</th>
							<th style='vertical-align:middle;'>手机名称</th>
							<th style='vertical-align:middle;text-align:center'>手机价格</th>
							<th style='vertical-align:middle;text-align:center'>手机库存</th>
							<th style='vertical-align:middle;'>手机详情</th>
							<th style='vertical-align:middle;'>购买链接</th>
							<th style='vertical-align:middle;text-align:center'>手机图片</th>
							<th style='vertical-align:middle;text-align:center'>上架</th>
							<th style='vertical-align:middle;text-align:center'>删除</th>
						</tr>
					</thead>
					
					<!-- 查询后的结果 -->
					<tbody id="displaytbody3">

					</tbody>
					
				</table>
			</div>
			
		</div>

	</form>
            
		</div>
	</div>
 </div>


</div>
		
		
</body>

<script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="static/layer-v3.1.1/layer/layer.js" ></script>
<script type="text/javascript">
	//页面一加载就查询phone表格所有信息
	$(function() {
		$.ajax({
			type : "GET", // 请求类型
			url : "AjaxQueryPhoneAction2", // 请求的url
			data : null, // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
			// 回调函数的dom操作
			// 解析json数据，在控制台显示查询结果
			console.info(data);
			
			var strHtml = '';
			$.each(data,function(index,item){
				strHtml += "<tr>";

				strHtml += "<td style='vertical-align:middle;text-align:center'><input type='checkbox' name='select' value=' ";
				strHtml +=item.phoneid;
				strHtml +=" '/></td>";
					
				strHtml += "<th scope='row' style='vertical-align:middle;text-align:center'>";
				strHtml += (index + 1);
				strHtml += "</th>";

				strHtml += "<td style='vertical-align:middle;'>";
				strHtml += item.phonename;
				strHtml += "</td>";
						
				strHtml += "<td style='vertical-align:middle;text-align:center'>";
				strHtml += item.phoneprice;
				strHtml += "</td>";

				strHtml += "<td style='vertical-align:middle;text-align:center'>";
				strHtml += item.phoneamount;
				strHtml += "</td>";

				strHtml += "<td style='vertical-align:middle;'>";
				strHtml += item.phonedescription;
				strHtml += "</td>";
						
				strHtml += "<td style='vertical-align:middle;'>";
				strHtml += item.phoneurl;
				strHtml += '</td>';
						
				strHtml += "<td style='vertical-align:middle;text-align:center'>";
				strHtml += "<img src='";
				strHtml+=item.phoneimg;					
				strHtml+="' width='30px' height='30px'/>";
				strHtml += "</td>";
					
				// 添加上架按钮
				strHtml += "<td style='vertical-align:middle;text-align:center'><a  href='javascript:ajax_backbyId(";
				strHtml += item.phoneid;
				strHtml += ")'>上架</a></td>";
				
				strHtml += "<td style='vertical-align:middle;text-align:center'><a  href='javascript:ajax_delete2byId(";
				strHtml += item.phoneid;
				strHtml += ")'>删除</a></td>";

				strHtml += "</tr>";
						
		})
					
			$("#displaytbody3").html(strHtml);

			if(strHtml==null||strHtml==""){
				layer.alert("回收站为空",{icon: 6});
			}
			
		},error : function(data) {
			alert("请求失败" + data);
		}
	});
});
	
</script>

<!-- 上架的action处理  -->
<script type="text/javascript">
	function ajax_backbyId(pid) {
		var isOK = confirm("是否上架该商品?");
		if (!isOK) {
			return false;
		}
		console.info("/*/*/*/*/*/*/*/*/pid："+pid);
		// 将form数据提出来，放入到formdata对象中，使用fromdata对象作为ajax发送的数据对象
		var formData = new FormData($("#form3")[0]);
		// 设置fromdata对象的enctype属性为multipart/form-data
		formData.enctype = "multipart/form-data";
		// 使用jquery进行ajax请求处理
		var backUri = "phone/" + pid;
		console.info(backUri);
		$.ajax({
			type : "post", // 请求类型
			url : backUri, // 请求的url
			data : formData,
			//dataType : "json", // 响应发挥的数据类型  
			contentType : false,
			processData : false,
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				layer.msg('上架成功',{icon: 1});
				//location.reload();
				var t1 = setTimeout(function(){window.location.reload();},1000);
			},
			error : function(data) {
				layer.alert("请求失败" + data);
			}
		});
	}
	
	function ajax_delete2byId(pid) {
		var isOK = confirm("是否彻底删除该商品?");
		if (!isOK) {
			return false;
		}
		console.info("/*/*/*/*/*/*/*/*/pid："+pid);
		// 将form数据提出来，放入到formdata对象中，使用fromdata对象作为ajax发送的数据对象
		var formData = new FormData($("#form3")[0]);
		// 设置fromdata对象的enctype属性为multipart/form-data
		formData.enctype = "multipart/form-data";
		// 使用jquery进行ajax请求处理
		var delUri = "phone/" + pid;
		console.info(delUri);
		$.ajax({
			type : "delete", // 请求类型
			url : delUri, // 请求的url
			data : formData,
			//dataType : "json", // 响应发挥的数据类型  
			contentType : false,
			processData : false,
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				layer.msg('删除成功',{icon: 1});
				//location.reload();
				var t2 = setTimeout(function(){window.location.reload();},1000);
			},
			error : function(data) {
				layer.alert("请求失败" + data);
			}
		});
	}
	
	
	function delAllDeleted(){
		var isOK = confirm("是否清空回收站?");
		if (!isOK) {
			return false;
		}
		$.ajax({
			type : "delete", // 请求类型
			url : "delAlldeleted", // 请求的url
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				layer.msg('删除成功',{icon: 1});
				//location.reload();
				var t2 = setTimeout(function(){window.location.reload();},1000);
			},
			error : function(data) {
				layer.alert("请求失败" + data);
			}
		});
	}
	
</script>

<!-- 批量删除回收站的商品 -->
<script type="text/javascript">
function todelect(){
    var Checkbox=false;//默认复选框为空
     $("input[name='select']").each(
		function(){//获取复选框节点id
      		if (this.checked==true) {        
        		Checkbox=true;    //已勾选
      		}
    	});
    if (Checkbox){//boolean值为true
        var t=confirm("您确认要删除选中的内容吗？");//弹出对话进行警告
        if (t==false){ return false; }//不勾选不处理
		//因为一个文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
        var obj = document.getElementsByName("select");//将复选框定义成一个jquery对象
//alert(obj[0]);

var arrvalue;//用于存放取出的数组的值
for(var i=0;i<obj.length;i++){
arrvalue=obj[i];//数组的索引是从0开始的
console.log(arrvalue);//把取出的值打印在控制台上
}

		var check_val="";
		//= new Array();//创建一个数组
		//check_val = [];//定义一个数组
        for(var k in obj){//往这个jquery对象添加勾选的id;
            if(obj[k].checked){
				//选中的都放进数组里
                //check_val.push(obj[k].value);
console.log(obj[k].value);//把取出的值打印在控制台上
				//选中的都放进字符串里
				check_val+=obj[k].value+",";
			}
        }
		

console.log(check_val);//把取出的值打印在控制台上
		
        $.ajax({//利用ajax发出请求
            type:"POST",//post类型
            url:"deleteMany?idss="+check_val, //向Controller里的deleteSelect传输ids
			//url: "deleteMany", 
			//data: JSON.stringify({"ids":check_val}),//将对象序列化成JSON字符串  
			dataType:"text",
			//contentType : 'application/json;charset=utf-8', //设置请求头信息
            success : function(data, textStatus, jqXHR) {//删除成功后，deleteMany会返回一个"ok";
				layer.msg('删除成功',{icon: 1});
				//location.reload();
				var t1 = setTimeout(function(){window.location.reload();},1000);
        	},
			error : function(data) {
				
				layer.alert("请求失败" + data);
			}
		});
   }else{
        layer.alert("请选择您要删除的内容!",{icon: 7});//不勾选不提交，弹出警告框。
        return false;
    }

}
</script>

</html>